import React, { Component } from 'react';
import { connect } from 'dva';
import { formatMessage, FormattedMessage } from 'umi-plugin-react/locale';
import Link from 'umi/link';
import { Checkbox, Alert, Modal, Icon, Input, Form, Button, Row, Col } from 'antd';
import Login from '@/components/Login';
import styles from './Login.less';

const { Tab, UserName, Password, Mobile, Captcha, Submit } = Login;

@connect(({ login, loading }) => ({
  login,
  submitting: loading.effects['login/login'],
}))
class LoginPage extends Component {
  handleSubmit = e => {
    e.preventDefault();
    this.props.form.validateFields((err, values) => {
      if (!err) {
        const { dispatch } = this.props;
        dispatch({
          type: 'login/login',
          payload: {
            ...values,
          },
        });
      }
    });
  };


  render() {
    const { login, submitting } = this.props;
    const { getFieldDecorator } = this.props.form;

    return (
      <div className={styles.main}>
        <Form onSubmit={this.handleSubmit}>
          <Form.Item>
            {getFieldDecorator('userName', {
              rules: [{ required: true, message: '请输入登录名!' }],
            })(
              <Input
                size='large'
                prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />}
                placeholder="登录名"
              />,
            )}
          </Form.Item>
          <Form.Item>
            {getFieldDecorator('password', {
              rules: [{ required: true, message: '请输入登录密码!' }],
            })(
              <Input
                size='large'
                prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />}
                type="password"
                placeholder="登录密码"
              />,
            )}
          </Form.Item>
          <Form.Item>
            {getFieldDecorator('captcha', {
              rules: [{ required: true, message: '请输入验证码!' }],
            })(
              <Row>
                <Col span={18}>
                  <Input
                    size='large'
                    prefix={<Icon type="captcha" style={{ color: 'rgba(0,0,0,.25)' }} />}
                    type="text"
                    placeholder="验证码"
                  />
                </Col>
                <Col offset={1} span={5}>
                  <img src='http://img1.imgtn.bdimg.com/it/u=486264821,3833220156&fm=26&gp=0.jpg' className={styles.captcha} />
                </Col>
              </Row>
              ,
            )}
          </Form.Item>
          <Form.Item>
            <Button type="primary" htmlType="submit" size='large' block>登录</Button>
          </Form.Item>
        </Form>
      </div>
    );
  }
}
LoginPage = Form.create({ name: 'normal_login' })(LoginPage);

export default LoginPage;
